<!--
*@Author: QWP
*@Description: 
*@Date: 2025-01-10 15:08:19
-->
<template>
  <a-popover v-bind="$attrs"
    :trigger="$attrs['trigger'] ?? 'hover'"
    :placement="$attrs['placement'] ?? 'bottom'">
    <template #content>
      <div class="u-right-menu-box">
        <div v-for="item in menus"
          class="u-menu-item f-flex-row"
          @click="emits('click', item.value, item)">
          <u-icon-font :type="item.icon" v-if="item.icon"
            class="f-padding-r6 u-menu-icon">
          </u-icon-font>
          {{ item.label }}
        </div>
      </div>
      <slot name="content"></slot>
    </template>
    <slot></slot>
  </a-popover>
</template>

<script lang='ts' setup>
defineOptions({
  name: 'u-popover'
})
import { ref, reactive, computed, onMounted } from 'vue' 
import { storeToRefs } from 'pinia'
import { useRoute, useRouter } from 'vue-router'

const props = defineProps<{
  menus?: any[] | any
}>()

const emits = defineEmits(['click'])

</script>

<style lang='scss' scoped>
.u-menu-item {
  cursor: pointer
}
</style>